<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { taskStore } from "@/store/modules/task";
import { regetTaskListToday } from "@/api/tasks/index";
import { reTaskupdateStatus } from "../../api/tasks/index";

const taskstate = taskStore();
const tasklistToday = ref();
const chartInstance = ref<echarts.ECharts | null>(null);

onMounted(async () => {
  const res = ref(await regetTaskListToday());
  tasklistToday.value = res.value.data;
  tasklistToday.value = res.value.data;
  initChart(); // 确保数据加载后初始化图表
});
const chartRef = ref<HTMLDivElement | null>(null);

const getStatusType = (status: any) => {
  switch (status) {
    case 1:
      return "success";
    default:
      return "info";
  }
};
const initChart = () => {
  if (!chartRef.value) return;

  // 销毁旧实例（如果存在）
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }

  // 初始化新实例
  chartInstance.value = echarts.init(chartRef.value);

  // 处理图表数据
  const chartData = tasklistToday.value.map((task) => ({
    value: task.estimatedDuration,
    name: task.title,
    itemStyle: {
      color: task.comleted === 1 ? "#67C23A" : "#909399", // 根据状态设置颜色
    },
  }));

  // 配置图表选项
  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c}小时 ({d}%)",
    },
    legend: {
      orient: "vertical",
      left: "left",
      data: chartData.map((item) => item.name),
    },
    series: [
      {
        name: "时间占比",
        type: "pie",
        radius: "50%",
        data: chartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 设置图表选项
  chartInstance.value.setOption(option);
};
watch(
  () => tasklistToday.value,
  () => {
    initChart();
  },
  { deep: true }
);

const handleClick = async (id: any, status: any) => {
  await reTaskupdateStatus(id, status);
  const res = ref(await regetTaskListToday());
  tasklistToday.value = res.value.data;

  await taskstate.getTaskList();
};
</script>

<template>
  <div class="home-page">
    <el-main>
      <h1>欢迎来到个人事务管理系统</h1>
      <p>这里是你的今日任务表和时间占比统计。</p>

      <!-- 今日任务表 -->
      <el-table :data="tasklistToday" style="width: 100%; margin-bottom: 20px">
        <el-table-column prop="title" label="任务"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column
          prop="estimatedDuration"
          label="花费时间（小时）"
        ></el-table-column>
        <el-table-column prop="comleted" label="状态">
          <template #default="scope">
            <el-tag
              :type="getStatusType(scope.row.comleted)"
              @click="handleClick(scope.row.id, scope.row.comleted)"
            >
              {{ scope.row.comleted == 1 ? "完成" : "代办" }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 时间占比图表 -->
      <div ref="chartRef" style="width: 100%; height: 400px"></div>
    </el-main>
  </div>
</template>
<style scoped lang="scss">
.home-page {
  display: flex;
  .el-main {
    text-align: center;
    padding: 60px 20px;

    h1 {
      font-size: 28px;
      margin-bottom: 20px;
    }

    p {
      font-size: 16px;
      color: #666;
      margin-bottom: 40px;
    }

    .el-table {
      margin: 0 auto;
      max-width: 800px;
    }
  }
}
</style>
